{% extends 'base_right.html' %}

{% block bodycontent %}

<section class="content">

            <div id="toolbar" class="toolbar">
                <a href="javascript:;" class="btn btn-primary btn-refresh" ><i class="fa fa-refresh"></i> </a> 
                <a href="javascript:;" id="btnadd" class="btn btn-success btn-add" ><i class="fa fa-plus"></i> 添加</a> 
                <a href="javascript:;" id="btnedit" class="btn btn-success btn-edit" ><i class="fa fa-pencil"></i> 编辑</a>                     
            </div>
            <table id="table" class="table table-striped table-bordered table-hover" width="100%">
            </table>

</section>

{% endblock %}

{% block footer %}
<script>
        var toolbar = $("#toolbar");
        var table = $("#table");
        
        // 初始化表格
        table.bootstrapTable({
            url: '/myauth/group/list',
            sortName: 'id',
            sortOrder: 'desc',
            cache: false,
            sidePagination: 'server',
            pagination: true,
            method: 'get',
            pageSize: 20,
            pageList: [20, 50, 100, 200, 'All'],
            toolbar: "#toolbar",
            mobileResponsive: true,
            pk: 'id', //editable插件
            columns: [
                [
                    {field: 'state', checkbox: true, },
                    {field: 'id', title: 'ID', visible: false, switchable: false},
                    {field: 'name', title: '用户群组名'},
                    {field: 'users', title: '成员'},
                    {field: 'operate', title: '操作', formatter: function(value,row,index){
                        var html = [];
                        html.push('<a href="javascript:;" onclick="addusers('+ row.id + ')" class="btn btn-primary btn-users btn-xs"><i class="fa fa-users"></i>成员设置</a>');
                        return html.join(' ');
                    }}
                ]
            ]
        });

        // 刷新按钮事件
        $(toolbar).on('click', '.btn-refresh', function () {
            table.bootstrapTable('refresh');
        });

        //添加按钮事件
        $(toolbar).on('click', '.btn-add', function () {
            layui_show('添加','/myauth/group/add')
        })

        //编辑按钮事件
        $(toolbar).on('click', '.btn-edit', function () {
            var id = selectedids(table);
            //一次编辑一个
            if(id.length == 1){ 
                var url= '/myauth/group/edit?id=' + id.join(",");
                layui_show('编辑',url)

            }else{
                toastr.error('同时只允许编辑一个');
            }  
        });

        function addusers(id){
            layui_show('添加组成员','/myauth/group/groupusersadd?groupid='+id)
        }
</script>
{% endblock %}